<template>
  <div class="app-container edit-page">

    <!-- 基本信息表单 -->
    <el-card shadow="never" class="box-card info-card">
      <div slot="header" class="card-header">
        <span class="header-title">项目基本信息</span>
<!--        <div class="header-actions">-->
<!--          <el-button-->
<!--            type="primary"-->
<!--            :loading="buttonLoading"-->
<!--            @click="submitForm2"-->
<!--            v-if="form.dataStatus === 0 || form.dataStatus === 2"-->
<!--          >-->
<!--            提交-->
<!--          </el-button>-->
<!--          <el-button-->
<!--            type="primary"-->
<!--            :loading="buttonLoading"-->
<!--            @click="submitForm1"-->
<!--            v-if="form.dataStatus === 0 || form.dataStatus === 2"-->
<!--          >-->
<!--            保存-->
<!--          </el-button>-->
<!--          <el-button @click="submitBack">返回</el-button>-->
<!--        </div>-->
      </div>

      <el-form ref="form" :model="form" :rules="rules" label-width="120px"
               :disabled="!(form.dataStatus === 0 || form.dataStatus === 2)"
      >
        <el-row :gutter="24">
          <el-col :xs="24" :sm="12" :md="12" :lg="8" class="my-el-form-col">
            <el-form-item label="项目名称" prop="projectName">
              <el-input v-model="form.projectName" placeholder="请输入项目名称"/>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="12" :lg="8" class="my-el-form-col">
            <el-form-item label="项目类型" prop="projectType">
              <el-select v-model="form.projectType" placeholder="请选择项目类型" style="width:100%">
                <el-option
                  v-for="dict in dict.type.project_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="12" :lg="8" class="my-el-form-col">
            <el-form-item label="项目类别" prop="projectCategory">
              <el-select v-if="form.projectType === '1'" v-model="form.projectCategory" placeholder="请选择项目类别"
                         style="width:100%"
              >
                <el-option
                  v-for="dict in dict.type.project_category_1"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
              <el-select v-else v-model="form.projectCategory" placeholder="请选择项目类别" style="width:100%">
                <el-option
                  v-for="dict in dict.type.project_category_2"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="12" :lg="8" class="my-el-form-col">
            <el-form-item label="交通物流规划" prop="planId">
              <el-select filterable v-model="form.planId" placeholder="请选择交通物流规划" clearable
                         style="width: 100%;"
              >
                <el-option v-for="item in planOptions" :key="item.planId" :label="item.planName" :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="12" :lg="8" class="my-el-form-col">
            <el-form-item label="立项日期" prop="startDate">
              <el-date-picker
                v-model="form.startDate"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择立项日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="12" :lg="8" class="my-el-form-col">
            <el-form-item label="结项日期" prop="endDate">
              <el-date-picker
                v-model="form.endDate"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择结项日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="12" :lg="8" class="my-el-form-col">
            <el-form-item label="主体单位" prop="mainEntity">
              <el-input v-model="form.mainEntity" placeholder="请输入主体单位"/>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="12" :lg="8" class="my-el-form-col">
            <el-form-item label="建设单位" prop="buildCompany">
              <el-input v-model="form.buildCompany" placeholder="请输入建设单位"/>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="12" :lg="8" class="my-el-form-col">
            <el-form-item label="建设状态" prop="buildStatus">
              <el-select v-model="form.buildStatus" placeholder="请选择建设状态" style="width:100%">
                <el-option
                  v-for="dict in dict.type.build_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>

            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" class="my-el-form-col">
            <el-form-item label="计划建开始设期" prop="planStartDate">
              <el-date-picker
                v-model="form.planStartDate"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择计划建开始设期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="12" :lg="8" class="my-el-form-col">
            <el-form-item label="计划完成建设期" prop="planEndDate">
              <el-date-picker
                v-model="form.planEndDate"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择计划完成建设期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" class="my-el-form-col">

          </el-col>

          <el-col :xs="24" :sm="12" :md="12" :lg="8" class="my-el-form-col">
            <el-form-item label="总投资(万元)" prop="totalInvest">
              <el-input-number :precision="2" :min="0.00" :max="99999.99" controls-position="right"
                               v-model="form.totalInvest" placeholder="请输入总投资"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="12" :lg="8" class="my-el-form-col">
            <el-form-item label="完成投资(万元)" prop="completeInvest">
              <el-input-number :precision="2" :min="0.00" :max="99999.99" controls-position="right"
                               v-model="form.completeInvest" placeholder="请输入完成投资"
              />
            </el-form-item>
          </el-col>

          <el-col :span="24" class="my-el-form-col">
            <el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                v-model="form.remark"
                placeholder="请输入备注"
                :rows="3"
                maxlength="200"
                show-word-limit
              />
            </el-form-item>
          </el-col>


        </el-row>
      </el-form>
    </el-card>

    <!-- 文件上传区域 -->
    <el-card shadow="never" class="box-card upload-card">
      <div slot="header" class="card-header">
        <span class="header-title">项目资料</span>
      </div>

      <el-form :model="form" label-width="140px" :disabled="!(form.dataStatus === 0 || form.dataStatus === 2)">
        <el-row :gutter="30">
          <el-col :xs="24" :sm="24" :md="8" class="my-el-col">
            <el-form-item label="项目建议书">
              <FileUpload v-model="feasibilityFiles" :limit="1" :fileType="['rar','zip','pdf','doc','docx','jpg','png']" :fileSize="25"
                          :show-delete-button="(form.dataStatus === 0 || form.dataStatus === 2)"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="8" class="my-el-col">
            <el-form-item label="可行性研究报告">
              <FileUpload v-model="designFiles" :limit="1" :fileType="['rar','zip','pdf','doc','docx','jpg','png']" :fileSize="25"
                          :show-delete-button="(form.dataStatus === 0 || form.dataStatus === 2)"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="8" class="my-el-col">
            <el-form-item label="初步设计">
              <FileUpload v-model="buildFiles" :limit="1" :fileType="['rar','zip','pdf','doc','docx','jpg','png']" :fileSize="25"
                          :show-delete-button="(form.dataStatus === 0 || form.dataStatus === 2)"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="8" class="my-el-col">
            <el-form-item label="施工图设计">
              <FileUpload v-model="completeFiles" :limit="1" ::fileType="['rar','zip','pdf','doc','docx','jpg','png']" :fileSize="25"
                          :show-delete-button="(form.dataStatus === 0 || form.dataStatus === 2)"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="8" class="my-el-col">
            <el-form-item label="其他资料">
              <FileUpload v-model="otherFiles" :limit="3"
                          :fileType="['rar','zip','pdf','doc','docx','jpg','png']"
                          :show-delete-button="(form.dataStatus === 0 || form.dataStatus === 2)" :fileSize="25"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 页面底部按钮 -->
    <div class="bottom-actions">
      <el-button
        type="primary"
        :loading="buttonLoading"
        @click="submitForm2"
        v-if="form.dataStatus === 0 || form.dataStatus === 2"
      >提交</el-button>
      <el-button
        type="primary"
        :loading="buttonLoading"
        @click="submitForm1"
        v-if="form.dataStatus === 0 || form.dataStatus === 2"
      >保存</el-button>
      <el-button @click="submitBack">返回</el-button>
    </div>

  </div>
</template>

<script>
import FileUpload from '@/components/FileUpload'
import {
  getTransportProject,
  addTransportProject,
  updateTransportProject
} from '@/api/dataBase/transportProject'
import { listTransportPlan } from '@/api/dataBase/transportPlan'

export default {
  name: 'TransportProjectEdit',
  components: { FileUpload },
  dicts: ['project_type', 'project_category_1', 'project_category_2', 'build_status'],
  data() {
    return {
      buttonLoading: false,
      planOptions: [],
      form: {
        id: undefined,
        projectName: undefined,
        projectType: undefined,
        projectCategory: undefined,
        planId: undefined,
        startDate: undefined,
        buildCompany: undefined,
        mainEntity: undefined,
        buildStatus: undefined,
        endDate: undefined,
        planStartDate: undefined,
        planEndDate: undefined,
        totalInvest: 0.00,
        completeInvest: 0.00,
        delFlag: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        remark: undefined,
        fileList1: '',
        fileList2: '',
        fileList3: '',
        fileList4: '',
        fileList5: '',
        fileList6: '',
        dataStatus: 0
      },
      rules: {
        projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
        projectType: [{ required: true, message: '请输入项目类型', trigger: 'blur' }],
        projectCategory: [{ required: true, message: '请输入项目类别', trigger: 'blur' }],
        planId: [{ required: true, message: '请输入交通物流规划', trigger: 'blur' }],
        startDate: [{ required: true, message: '请选择立项日期', trigger: 'change' }],
        buildCompany: [{ required: true, message: '请输入建设单位', trigger: 'blur' }],
        mainEntity: [{ required: true, message: '请输入主体', trigger: 'blur' }],
        buildStatus: [{ required: true, message: '请输入建设状态', trigger: 'blur' }]
      }
    }
  },
  computed: {
    feasibilityFiles: {
      get() {
        return this.form.fileList1
      },
      set(val) {
        this.form.fileList1 = val
      }
    },
    designFiles: {
      get() {
        return this.form.fileList2
      },
      set(val) {
        this.form.fileList2 = val
      }
    },
    buildFiles: {
      get() {
        return this.form.fileList3
      },
      set(val) {
        this.form.fileList3 = val
      }
    },
    completeFiles: {
      get() {
        return this.form.fileList4
      },
      set(val) {
        this.form.fileList4 = val
      }
    },
    otherFiles: {
      get() {
        return this.form.fileList5
      },
      set(val) {
        this.form.fileList5 = val
      }
    }
  },
  created() {
    this.getPlanList()
    const id = this.$route.query.id
    if (id) {
      this.loadData(id)
    }
  },
  methods: {
    getPlanList() {
      listTransportPlan().then(response => this.planOptions = response.rows)
    },
    async loadData(id) {
      try {
        const res = await getTransportProject(id)
        this.form = { ...res.data }
      } catch (err) {
        this.$message.error('加载数据失败')
      }
    },
    submitBack() {
      const obj = { path: '/transportProject' }
      // const obj = { path: '/base-data/transportProject' }
      this.$tab.closeOpenPage(obj)
    },
    submitForm1() {
      this.$refs.form.validate(async valid => {
        if (!valid) return
        this.buttonLoading = true
        try {
          this.form.dataStatus = 0
          if (this.form.id) {
            await updateTransportProject(this.form)
            this.$message.success('保存成功')
          } else {
            await addTransportProject(this.form)
            this.$message.success('保存成功')
          }
          this.submitBack()
        } catch (err) {
          this.$message.error('保存失败')
        } finally {
          this.buttonLoading = false
        }
      })
    },
    submitForm2() {
      this.$refs.form.validate(async valid => {
        if (!valid) return
        this.buttonLoading = true
        try {
          this.form.dataStatus = 1
          if (this.form.id) {
            await updateTransportProject(this.form)
            this.$message.success('提交成功')
          } else {
            await addTransportProject(this.form)
            this.$message.success('提交成功')
          }
          this.submitBack()
        } catch (err) {
          this.form.dataStatus = 0
          this.$message.error('提交失败')
        } finally {
          this.buttonLoading = false
        }
      })
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.box-card {
  border-radius: 8px;
  border: 1px solid #e6e8eb;
  margin-bottom: 20px;
}
.my-el-form-col {
  height: 60px;
}
.my-el-col {
  height: 160px;
}
/* 底部按钮样式 */
/* 固定底部 */
.bottom-actions {
  display: flex;
  justify-content: center; /* 居中按钮 */
  gap: 12px;               /* 按钮间距 */
  padding: 20px 0;
  margin-top: 20px;
  border-top: 1px solid #e6e8eb;
  background-color: #fff;
}
</style>
